<!-- 高压运行数据维护 -->
<template>
  <div class="layout-container">
    <el-container class="layout-container">
      <el-main style="padding:10px;">
        <div>
          <span class="search-font">录入范围:</span>
          <el-date-picker v-model="treeData.qssj" :clearable="false" type="date" size="mini" placeholder="选择日期" />-
          <el-date-picker v-model="treeData.zzsj" :clearable="false" type="date" size="mini" placeholder="选择日期" />
          &nbsp;&nbsp;
          <span class="search-font">当前单位:</span>
          <el-input v-model="treeData.dwmc" disabled size="mini" style="width:200px" />
          &nbsp;&nbsp;
          <span class="search-font">责任部门:</span>
          <el-input v-model="treeData.zrbm" :disabled="true" size="mini" style="width:190px">
            <template slot="append">
              <el-button class="exportBtn button-choose" type="primary" size="mini" plain @click="modifyForm">选择</el-button>
            </template>
          </el-input>
          &nbsp;&nbsp;
        </div>
        <div style="padding-top: 10px">
          <span class="search-font">停电性质:</span>
          <el-input v-model="treeData.dwxz" size="mini" style="width:200px" />
          &nbsp;&nbsp;
          <span class="search-font">只显示跨月事件:</span>
          <el-checkbox v-model="treeData.checkbox" />
          <span class="searchFor">
            <el-button class="exportBtn" type="primary" size="mini" icon="el-icon-zoom-in" @click="searchFor">搜 索</el-button>
            <el-button class="exportBtn" type="primary" size="mini" icon="el-icon-delete" @click="empty">清 除</el-button>
          </span>
          <span style="float:right">
            <el-button class="exportBtn" type="primary" size="mini" icon="el-icon-plus" @click="addPopUpsDialog">添 加</el-button>
            <el-button class="exportBtn" type="primary" size="mini" icon="el-icon-setting" @click="cccEvent('show', cccTable)">配置列</el-button>
            <el-button class="exportBtn" type="primary" size="mini" @click="cccEvent('export', cccTable)">导 出</el-button>
          </span>
        </div>
        <!-- 表格 -->
        <div class="table-container" style="margin-top: 10px">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            size="medium"
            :data="dataList"
            height="100%"
            border
            highlight-current-row
          >
            <el-table-column type="selection" align="center" />
            <el-table-column type="index" align="center" label="序号" width="50" />
            <template v-for="col in columnData">
              <el-table-column
                :key="col.id"
                :show-overflow-tooltip="true"
                :prop="col.field"
                :label="col.title"
                :min-width="col.minWidth"
                :align="col.align"
                :header-align="col.align"
                :sortable="col.sortable"
                :formatter="col.formatter"
                :fixed="col.fixed"
              />
            </template>
            <el-table-column align="center" fixed="right" label="操作" width="140">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="primary" @click="changeData(scope.row)" />
                <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteTdsj(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
            :current-page.sync="listQuery.current"
            :page-size="listQuery.size"
            :page-sizes="[10, 20, 40, 80]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <yxgytdsjAddDialog ref="addPopUps" :prop-add-data="propAddData" @tdsjClose="tdsjClose" @successfullySaved="successfullySaved" />
    <!-- 选择责任部门弹窗  -->
    <GetDwbm ref="GetDwbm" :tree-obj="treeObj" @handleGetDwbm="handleGetDwbm" />
    <!-- 配置列 -->
    <ccc ref="ccc" />
  </div>
</template>

<script>
import GetDwbm from '@/dialogCommom/GetDwbm'
import ccc from '@/dialogCommom/ccc'
import { dataModulePrefix } from '../../../config'
import { getGytdsjPage, deleteBatch, checkToken } from '@/api/sjwh/yxgy'
import { getUserInfo } from '@/utils/utilInfo.js'
import yxgytdsjAddDialog from './modules/yxgytdsjAddDialog'
export default {
  components: {
    GetDwbm,
    yxgytdsjAddDialog,
    ccc
  },
  data() {
    return {
      columnData: [], // 表格表头数据
      dataList: [], // 表格数据
      listQuery: {
        // 查询条件字段
        dwbm: '',
        current: 1, // 当前页
        size: 10 // 一页显示条数
      },
      total: 0,
      treeData: {
        checkbox: false,
        dwbm: '',
        dwjb: '',
        dwmc: '',
        dwxz: '',
        dwxzm: '',
        zrbm: '',
        qssj: '',
        zzsj: new Date()
      },
      // 责任部门组件传参
      treeObj: {
        type: 'radio',
        dwbm: ''
      },
      cccTable: 'yx_gytdsj', // 列配置表名
      listLoading: false,
      propAddData: { // 传给【高压停电事件新增】组件的值
        show: false,
        sjfw: '',
        edit: false
      }
    }
  },
  beforeUpdate() {
    // 解决列配置引发的滚动条问题
    this.$nextTick(() => {
      this.$refs['multipleTable'].doLayout()
    })
  },
  async mounted() {
    // 还获取导航页参数和默认起始时间
    this.dataT()
    this.qssjTimer()
    await this.cccEvent('load', this.cccTable)
    await this.getList()
  },
  methods: {
    // 关闭添加弹窗
    tdsjClose() {
      this.propAddData.show = false
      this.propAddData.edit = false
    },
    // 添加弹窗保存
    async successfullySaved() {
      // 保存事件成功回显
      await this.getList()
      this.propAddData.show = false
    },
    //   添加
    addPopUpsDialog() {
      this.propAddData.show = true
    },
    // 搜索
    searchFor() {

    },
    // 清除
    empty() {

    },
    // 修改
    async changeData(item) {
      await checkToken({ czy: getUserInfo.userName, id: item.id, token: new Date() })
      this.propAddData.show = true
      this.propAddData.edit = true
      this.$nextTick(res => {
        this.$refs.addPopUps.changeEventData(item.id)
      })
    },
    // 删除
    async deleteTdsj(item) {
      // 要删除的对象
      await deleteBatch({
        czy: getUserInfo.userName,
        ids: [item.id]
      })
      await this.getList()
    },
    // 责任部门选择
    modifyForm() {
      this.$refs.GetDwbm.openDwbm()
    },
    handleGetDwbm(val) {
      this.treeData.id = val.id
      this.treeData.zrbm = val.label
    },
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    // 获取表格数据
    async getList() {
      await getGytdsjPage(this.listQuery).then(res => {
        this.dataList = res.data.records
        this.total = res.data.total
      })
    },
    // 默认起始时间
    qssjTimer() {
      var now = new Date() // 当前日期
      var nowMonth = now.getMonth() // 当前月
      var nowYear = now.getFullYear() // 当前年
      // 本月的开始时间
      this.treeData.qssj = new Date(nowYear, nowMonth, 1)
      this.propAddData.sjfw = this.treeData.qssj
    },
    // 获取导航页参数
    dataT() {
      const data = JSON.parse(sessionStorage.getItem('treeNode')) // 获取导航页参数
      this.treeObj.dwbm = data['dwbm']
      this.treeData.dwbm = data.dwbm
      this.treeData.dwjb = data.dwjb
      this.treeData.dwmc = data.dwmc
      this.treeData.dwxz = data.dwxz
      this.treeData.dwxzm = data.dwxzm
    },
    // 列配置
    cccEvent(method, table) {
      if (method === 'show') {
        this.$refs.ccc.show(table)
      } else if (method === 'load') {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table))
          })
        }).then(response => {
          this.columnData = response
        })
      } else if (method === 'export') {
        const vo = {
          tableCode: table,
          param: this.listQuery,
          url: `${dataModulePrefix}/yx-gytdsj/page`,
          method: 'POST',
          fileName: '运行高压停电事件',
          total: this.total
        }
        this.$refs.ccc.exportExcel(vo)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.search-container {
  width: 100%;
  overflow: hidden;
  padding-right: 0;
}
.table-container {
  width: 100%;
  height: calc(90% - 90px);
}
.pagination-container {
  text-align: center;
}
.search-font {
  font-size: 15px;
  font-weight: 600;
  color: gray;
  padding-right: 10px;
}
.title_size {
  font-weight: bold;
  font-size: 20px;
}
.el-date-editor.el-input {
  width: 130px;
}
.searchFor {
  display: inline-block;
  margin-left: 12px;
}
.button-choose {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #ffffff !important;
}
</style>
